<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
    <!-- 列表 -->
    <List
      :shoplist1="shoplist1"
      :currentIndex="currentIndex"
      :shoplist2="shoplist2"
    ></List>

    <!-- tabber -->
    <Tabber></Tabber>
  </div>
</template>

<script>
import List from "./components/List.vue";
import Tabber from "./components/Tabber.vue";
import { shop_list, tuan_list } from "./utils/api";
export default {
  data() {
    return {
      currentIndex: 0,
      shoplist1: [],
      shoplist2: [],
    };
  },
  components: {
    List,
    Tabber,
    shop_list,
    tuan_list,
  },

  mounted() {
    tuan_list({ status: 1 }).then((res) => {
      // console.log(res.data);
      this.shoplist1 = res.data.list;
    });
    tuan_list({ status: 0 }).then((res) => {
      console.log(res.data);
      this.shoplist2 = res.data.list;
    });
  },
};
</script>

<style lang="scss" >
* {
  margin: 0;
  padding: 0;
}
</style>
